// 1. 后端分页，查询用户列表数据：

let page = 1; // 当前第一页
let limit = 2; // 每页2条数据
let count = 0; //总页数，默认0
let usersArr = []  // 存储当前分页的数据
let imgFile = null;// 文件上传用的变量：
let userId = null; // 被修改的用户的id；

let nowCount = 0; // 当前页，显示了几天数据

const getUserList = () => {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if ( xhr.readyState === 4 && xhr.status === 200 ) {
      let res = JSON.parse( xhr.responseText );
      if ( res.code === 0 ) {
        console.log( res );  // {code, msg, count, data}
        count = Math.ceil( res.count / limit );
        usersArr = res.data;  // 赋值给变量，目的，再查看，修改时，可以复用。
        nowCount = res.data.length;

        renderTable( res.data )  // 渲染表格
        renderPage( count )//渲染分页
      } else {
        console.log( res );
      }
    }
  }
  xhr.open( 'get', "/user/getAll?pageNow=" + page + "&pageSize=" + limit );
  // xhr.open( 'get', "http://127.0.0.1:80/user/getAll?pageNow=" + page + "&pageSize=" + limit );
  xhr.send();
}
//渲染表格
const renderTable = ( arr ) => {
  let userTbody = document.getElementById( 'userTbody' );
  userTbody.innerHTML = '';
  let strHtml = '';
  arr.forEach( ( el, index ) => {
    strHtml += `<tr data-id="${ el.uid }">
                  <td>
                    <input type="checkbox">
                  </td>
                  <td>${ el.uaccess }</td>
                  <td>${ el.uname }</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="check-state custom-control-input" id="customSwitch${ index }" ${ el.ustate === '1' ? 'checked' : '' }>
                      <label class="custom-control-label" for="customSwitch${ index }">${ el.ustate === '1' ? '启用' : '禁用' }</label>
                    </div>
                  </td>
                  <td>
                    <button type="button" class="btn btn-link text-info btn-roles">角色选择</button>
                    <button type="button" class="btn btn-link text-danger btn-delete">删除</button>
                    <button type="button" class="btn btn-link text-primary btn-modify">修改</button>
                  </td>
                </tr>`;
  } );
  userTbody.innerHTML = strHtml;
}
//渲染分页
const renderPage = ( count ) => {
  let strHtml = '';
  let userPagination = document.getElementById( 'userPagination' )
  userPagination.innerHTML = ''
  strHtml += `<li class="page-item">
  <a class="page-link">Previous</a>
</li>`;
  for ( let i = 1; i <= count; i++ ) {
    strHtml += ` <li class="page-item ${ i === page ? 'active' : '' }"><a class="page-link" href="#">${ i }</a></li>`
  }
  strHtml += `<li class="page-item">
  <a class="page-link" href="#">Next</a>
</li>`
  userPagination.innerHTML = strHtml;
}

window.onload = getUserList;


// 事件的委托：
$( document ).on( 'click', ".btn-modify", showModifyModal )
// $( document ).on( 'click', ".btn-roles", showSelectModal)
// $( document ).on( 'click', ".btn-delete", showDeleteModal)

// 再修改用户的Modal里面，文件上传的事件绑定。
// $( "#customFile2" ).on( 'change', function () { } )
$( "#customFile2" ).change( showFile )


// 确认修改用户：
$( "#modifyUserBtn" ).click( modifyUserInfoFn )

// 显示修改的modal:
function showModifyModal () {
  $( "#modalModifyUser" ).modal( 'show' );  // 1. 显示modal
  let uid = $( this ).parents( 'tr' ).attr( 'data-id' );  // 2. 获取ID
  // console.log( uid ) //"1"
  userId = Number( uid );  // 全局存储。
  let userInfo = {};
  usersArr.forEach( ( el, index, arr ) => {  // 3. 循环查找和uid相同的值的对象。
    // console.log( el )
    if ( el.uid === Number( uid ) ) {
      userInfo = el;
    }
  } );
  // console.log( userInfo )

  // 4. 把用户信息，显示到表单中；
  $( "#uacessno2" ).val( userInfo.uaccess )
  $( "#nickname2" ).val( userInfo.uname )
  $( "#password2" ).val( userInfo.upassword )
  // document.表单名称 => 表单对象
  // 表单对象.表单域成员的名称 =》表单域成员对象
  document.userInfoForm2.usex.value = userInfo.usex;
  document.userInfoForm2.utel.value = userInfo.utel;
  document.userInfoForm2.usid.value = userInfo.usid;
  // $( "#userModifyPhoto" ).attr( 'src', 'http://127.0.0.1:80/uploads/' + userInfo.uphoto ) // 访问的是别人的服务器
  $( "#userModifyPhoto" ).attr( 'src', '/uploads/' + userInfo.uphoto )  // 访问的是自己服务器上的图片资源

}

// 预览图片文件
function showFile () {
  // console.log( this.value ) // C:\fakepath\dayuhaitang.webp,我们不能直接你硬盘里面的文件在浏览器里面显示的。

  if ( this.files.length === 0 ) {
    alert( '请选择一个图片' )
    imgFile = "";
    return;
  } else {
    imgFile = this.files[ 0 ]
    console.log( this.files )  // FileList类型的数组，里面每一个元素，都是上传的文件对象。
  }

  // 判断上传的文件类型：
  let tempArr = imgFile.name.split( "." )  // ["mn","sdfs","sdds","webp"]
  let fileExtendName = tempArr[ tempArr.length - 1 ];
  if ( fileExtendName !== 'png' && fileExtendName !== 'gif' && fileExtendName !== 'jpg' && fileExtendName !== 'jpeg' && fileExtendName !== 'webp' ) {
    alert( '请选择图片，在上传。文件类型支持：.png,.jpg,.jpeg,.gif, .webp ' )
    imgFile = "";
    return;
  }

  // 预览图片
  // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader  
  let reader = new FileReader(); //FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
  reader.readAsDataURL( imgFile )  // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
  // 当转base64编码完成时，就执行下面的事件
  reader.onload = function ( e ) {  // 由于读取文件时异步的，所以必须通过Onload事件来那最后的结果。
    console.log( e )
    var base64str = e.target.result;  // “...."
    // 直接把base64字符串，赋值img.src，就可以预览图片了。
    document.getElementById( 'userModifyPhoto' ).src = base64str;
  }

}

// 提交修改的数据：
function modifyUserInfoFn () {
  if ( !imgFile ) {
    alert( '请选择一个头像来上传。' );
    return;
  }
  //...  一定要写验证。
  // 扩展： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions

  // 获取表单数据
  let userInfo = {};
  userInfo.uaccess = $( "#uacessno2" ).val();
  userInfo.uname = $( "#nickname2" ).val()
  userInfo.upassword = $( "#password2" ).val()
  userInfo.usex = $( "input[name='usex']:checked" ).val()
  userInfo.usid = $( "#sid2" ).val()
  userInfo.utel = $( "#tel2" ).val()
  userInfo.uphoto = imgFile;
  userInfo.uid = userId;  // 修改表格数据的关键参数。
  userInfo.ustate = '1';

  // 准备请求后端的参数数据
  let myFormData = new FormData();  //  创建表单数据格式的对象。
  for ( let key in userInfo ) {
    myFormData.append( key, userInfo[ key ] )  // key，就是后端的参数名称，
  }
  // console.log( myFormData ) // FormData {},不能直接观察到添加过的Key的值！！
  // console.log( myFormData.get( 'utel' ) ) //1325456442 只能通过get（key）来获取并查看Key的值。

  // 再JQ的ajax做文件上传时，一点要注意参数的配置：
  $.ajax( {
    url: "/user/modifyUserInfo",
    type: 'post',
    data: myFormData,
    // 文件上传，必须加2个属性：
    contentType: false, // 使用普通表单的编码格式, application/x-www-form-urlencoded
    processData: false, // 不对参数重新序列化成字符串参数。保持参数自己的格式。 默认会把一个{key:value,a:1}=>?key=value&a=1

    success ( res ) {
      if ( res.code === 0 ) {
        alert( res.msg )
        // 成功后，隐藏Modal，再重新请求列表的数据。
        $( "#modalModifyUser" ).modal( 'hide' )
        getUserList();
      } else {
        alert( res.msg )
      }
    }
  } )
}

// 改变用户的状态
$( document ).on( 'change', '.check-state', function () {
  // 根据当前 input 的选中状态，来修改用户的状态：
  // console.log( this.checked )  //选中： true(1), 反之，false(2).
  let ustate = this.checked ? "1" : "2";

  let uid = Number( $( this ).parents( 'tr' ).attr( 'data-id' ) )

  $.ajax( {
    url: "/user/changeState",
    type: 'post',
    data: { ustate, uid },
    success ( res ) {
      if ( res.code === 0 ) {
        alert( res.msg )
        getUserList();
      } else {
        alert( res.msg )
      }
    }
  } )

} )

// 分页的事件绑定：
$( document ).on( 'click', ".page-link", function ( event ) {
  console.log( this )
  event.preventDefault(); // 阻止<a></a>标签的默认行为


  let text = this.innerText;
  console.log( text )

  if ( text !== 'Previous' && text !== 'Next' ) {
    if ( Number( text ) === page ) { //点击的是当前页
      return;// 不调用接口
    } else {
      page = Number( text )  // 其它数字
    }
  } else if ( text === 'Next' && page < count ) {  // 点下一页同时不是最后一页时。
    page++

  } else if ( text === 'Previous' && page > 1 ) {  // 点上一页时，同时不是第一页。
    page--
  } else {  //其它情况，都不改变Page的值，同时也不调用接口
    return;  // 不调用接口
  }
  // 调用接口
  // console.log( "调用接口" )
  getUserList(); // 重复调获取一页用户数据的函数。
} )

// 删除用户
$( document ).on( 'click', ".btn-delete", function () {
  let uid = Number( $( this ).parents( 'tr' ).attr( 'data-id' ) );
  // console.log( uid )

  $.ajax( {
    url: '/user/delete',
    type: 'post',
    data: { uid },
    success ( res ) {
      if ( res.code === 0 ) {
        alert( res.msg );
        // 解决删除一页最后一天数据时，出现的BUG。
        nowCount--; // 当前页减少一天数据
        nowCount == 0 ? page-- : "";
        page < 1 && ( page = 1 ); // 如果&&左边表达式为真，就执行右边表达式。
        // 如果左边表达式为假，就不执行右边表达式。

        // 左边表达式 ||右边表达式 , 左边表达式为真时，不执行右边表达式。
        // 左边表达式为假时，执行右边表达式。


        getUserList();
      } else {
        alert( res.msg );

      }
    }
  } )
} )